@formicoidea/labre-core 0.26.0 → 0.28.0

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-element-link.js

@@ -0,0 +1,233 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { RefNodeSlotsProvider } from '../affine-inline-reference/index.js';
+import { requestThrottledConnectedFrame } from '../affine-shared/utils/index.js';
+import { WidgetComponent } from '../std/index.js';
+import { GfxControllerIdentifier, GfxPrimitiveElementModel, } from '../std/gfx/index.js';
+import { OpenInNewIcon, RightSidebarIcon } from '@blocksuite/icons/lit';
+import { css, html, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+export const EDGELESS_ELEMENT_LINK_WIDGET = 'edgeless-element-link';
+/**
+ * Shows a clickable arrow when hovering a drawing element that carries a link
+ * ({@link GfxPrimitiveElementModel.linkedDocId} or `.externalLink`). Clicking it
+ * opens the linked doc (host side-view via `docLinkClicked`) or the URL.
+ *
+ * ponytail: hover is resolved via `getElementByPoint`, which returns the topmost
+ * leaf — a link set on a group only shows when a child is hovered. Good enough
+ * for v1 (shapes/text/connectors are hit directly).
+ */
+let EdgelessElementLinkWidget = (() => {
+    let _classSuper = WidgetComponent;
+    let __target_decorators;
+    let __target_initializers = [];
+    let __target_extraInitializers = [];
+    let __rect_decorators;
+    let __rect_initializers = [];
+    let __rect_extraInitializers = [];
+    return class EdgelessElementLinkWidget extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this._hideTimer = null;
+            this.#_target_accessor_storage = __runInitializers(this, __target_initializers, null);
+            this.#_rect_accessor_storage = (__runInitializers(this, __target_extraInitializers), __runInitializers(this, __rect_initializers, null));
+            this._updateRect = (__runInitializers(this, __rect_extraInitializers), requestThrottledConnectedFrame(() => {
+                const el = this._target;
+                if (!el) {
+                    this._rect = null;
+                    return;
+                }
+                const bound = el.elementBound;
+                const { viewport } = this.gfx;
+                const [left, top] = viewport.toViewCoord(bound.x, bound.y);
+                this._rect = {
+                    left,
+                    top,
+                    width: bound.w * viewport.zoom,
+                    height: bound.h * viewport.zoom,
+                };
+            }, this));
+            this._open = (e) => {
+                e.stopPropagation();
+                const el = this._target;
+                if (!el)
+                    return;
+                if (el.linkedDocId) {
+                    this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.next({
+                        pageId: el.linkedDocId,
+                        host: this.std.host,
+                    });
+                }
+                else if (el.externalLink) {
+                    window.open(el.externalLink, '_blank', 'noopener,noreferrer');
+                }
+            };
+            this._onKeydown = (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this._open(e);
+                }
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __target_decorators = [state()];
+            __rect_decorators = [state()];
+            __esDecorate(this, null, __target_decorators, { kind: "accessor", name: "_target", static: false, private: false, access: { has: obj => "_target" in obj, get: obj => obj._target, set: (obj, value) => { obj._target = value; } }, metadata: _metadata }, __target_initializers, __target_extraInitializers);
+            __esDecorate(this, null, __rect_decorators, { kind: "accessor", name: "_rect", static: false, private: false, access: { has: obj => "_rect" in obj, get: obj => obj._rect, set: (obj, value) => { obj._rect = value; } }, metadata: _metadata }, __rect_initializers, __rect_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    :host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .open-link-button {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      background: var(--affine-background-overlay-panel-color, #fff);
+      box-shadow: var(--affine-shadow-1);
+      color: var(--affine-icon-color);
+      cursor: pointer;
+      pointer-events: auto;
+      transform: translate(-50%, -50%);
+    }
+
+    .open-link-button:hover {
+      background: var(--affine-hover-color);
+    }
+
+    .open-link-button svg {
+      width: 16px;
+      height: 16px;
+    }
+  `; }
+        #_target_accessor_storage;
+        get _target() { return this.#_target_accessor_storage; }
+        set _target(value) { this.#_target_accessor_storage = value; }
+        #_rect_accessor_storage;
+        get _rect() { return this.#_rect_accessor_storage; }
+        set _rect(value) { this.#_rect_accessor_storage = value; }
+        get gfx() {
+            return this.std.get(GfxControllerIdentifier);
+        }
+        _hasLink(el) {
+            return (el instanceof GfxPrimitiveElementModel &&
+                Boolean(el.linkedDocId || el.externalLink));
+        }
+        _setTarget(el) {
+            if (el) {
+                if (this._hideTimer) {
+                    clearTimeout(this._hideTimer);
+                    this._hideTimer = null;
+                }
+                this._target = el;
+                this._updateRect();
+                return;
+            }
+            // Delay hiding so the pointer can travel from the element to the button.
+            if (this._target && !this._hideTimer) {
+                this._hideTimer = setTimeout(() => {
+                    this._hideTimer = null;
+                    this._target = null;
+                    this._rect = null;
+                }, 200);
+            }
+        }
+        /** The hovered element if it carries a link, else its nearest linked group. */
+        _resolveLinked(hit) {
+            if (this._hasLink(hit))
+                return hit;
+            const groups = hit instanceof GfxPrimitiveElementModel ? hit.groups : [];
+            for (const group of groups) {
+                if (this._hasLink(group))
+                    return group;
+            }
+            return null;
+        }
+        firstUpdated() {
+            const { _disposables, gfx } = this;
+            _disposables.add(this.std.host.event.add('pointerMove', ctx => {
+                const evt = ctx.get('pointerState');
+                const [x, y] = gfx.viewport.toModelCoord(evt.x, evt.y);
+                this._setTarget(this._resolveLinked(gfx.getElementByPoint(x, y)));
+            }));
+            _disposables.add(gfx.viewport.viewportUpdated.subscribe(() => {
+                if (this._target)
+                    this._updateRect();
+            }));
+            _disposables.add(() => {
+                if (this._hideTimer)
+                    clearTimeout(this._hideTimer);
+            });
+        }
+        render() {
+            const rect = this._rect;
+            const target = this._target;
+            if (!target || !rect)
+                return nothing;
+            const isDoc = Boolean(target.linkedDocId);
+            const label = isDoc ? 'Open linked doc' : 'Open link';
+            return html `<div
+      class="open-link-button"
+      role="button"
+      tabindex="0"
+      title=${label}
+      aria-label=${label}
+      style=${styleMap({
+                left: `${rect.left + rect.width}px`,
+                top: `${rect.top}px`,
+            })}
+      @click=${this._open}
+      @keydown=${this._onKeydown}
+      @pointerenter=${() => this._setTarget(target)}
+      @pointerleave=${() => this._setTarget(null)}
+    >
+      ${isDoc ? RightSidebarIcon() : OpenInNewIcon()}
+    </div>`;
+        }
+    };
+})();
+export { EdgelessElementLinkWidget };

package/dist/_pkgs/affine-widget-edgeless-selected-rect/effects.js

@@ -1,8 +1,10 @@
 import { EdgelessAutoCompletePanel } from './auto-complete-panel';
 import { EdgelessAutoComplete } from './edgeless-auto-complete';
+import { EDGELESS_ELEMENT_LINK_WIDGET, EdgelessElementLinkWidget, } from './edgeless-element-link';
 import { EDGELESS_SELECTED_RECT_WIDGET, EdgelessSelectedRectWidget, } from './edgeless-selected-rect';
 export function effects() {
     customElements.define('edgeless-auto-complete-panel', EdgelessAutoCompletePanel);
     customElements.define('edgeless-auto-complete', EdgelessAutoComplete);
     customElements.define(EDGELESS_SELECTED_RECT_WIDGET, EdgelessSelectedRectWidget);
+    customElements.define(EDGELESS_ELEMENT_LINK_WIDGET, EdgelessElementLinkWidget);
 }

package/dist/_pkgs/affine-widget-edgeless-selected-rect/spec.d.ts

@@ -1 +1,2 @@
 export declare const edgelessSelectedRectWidget: import("../store/index.js").ExtensionType;
+export declare const edgelessElementLinkWidget: import("../store/index.js").ExtensionType;

package/dist/_pkgs/affine-widget-edgeless-selected-rect/spec.js

@@ -1,4 +1,6 @@
 import { WidgetViewExtension } from '../std/index.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
+import { EDGELESS_ELEMENT_LINK_WIDGET } from './edgeless-element-link';
 import { EDGELESS_SELECTED_RECT_WIDGET } from './edgeless-selected-rect';
 export const edgelessSelectedRectWidget = WidgetViewExtension('affine:page', EDGELESS_SELECTED_RECT_WIDGET, literal `${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`);
+export const edgelessElementLinkWidget = WidgetViewExtension('affine:page', EDGELESS_ELEMENT_LINK_WIDGET, literal `${unsafeStatic(EDGELESS_ELEMENT_LINK_WIDGET)}`);

package/dist/_pkgs/affine-widget-edgeless-selected-rect/view.js

@@ -1,6 +1,6 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
 import { effects } from './effects';
-import { edgelessSelectedRectWidget } from './spec';
+import { edgelessElementLinkWidget, edgelessSelectedRectWidget } from './spec';
 export class EdgelessSelectedRectViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -14,6 +14,7 @@ export class EdgelessSelectedRectViewExtension extends ViewExtensionProvider {
         super.setup(context);
         if (this.isEdgeless(context.scope)) {
             context.register(edgelessSelectedRectWidget);
+            context.register(edgelessElementLinkWidget);
         }
     }
 }

package/dist/_pkgs/data-view/core/data-source/base.d.ts

@@ -129,4 +129,10 @@ export declare abstract class DataSourceBase implements DataSource {
         index: number;
     } | undefined;
     isFixedProperty(propertyId: string): boolean;
+    /**
+     * Tear down anything the source subscribed to (e.g. external observers).
+     * No-op by default — the inline blob source holds no subscriptions. The
+     * owning block calls this when it rebuilds the source or disconnects.
+     */
+    dispose(): void;
 }

package/dist/_pkgs/data-view/core/data-source/base.js

@@ -80,4 +80,10 @@ export class DataSourceBase {
         }
         return false;
     }
+    /**
+     * Tear down anything the source subscribed to (e.g. external observers).
+     * No-op by default — the inline blob source holds no subscriptions. The
+     * owning block calls this when it rebuilds the source or disconnects.
+     */
+    dispose() { }
 }

package/dist/_pkgs/std/gfx/model/surface/element-model.d.ts

@@ -100,6 +100,13 @@ export declare abstract class GfxPrimitiveElementModel<Props extends BaseElement
     accessor externalXYWH: SerializedXYWH | undefined;
     accessor hidden: boolean;
     accessor index: string;
+    /**
+     * Minimal link target attached to the element. At most one is set.
+     * Opaque to the framework; an affine widget shows a hover arrow that
+     * opens the doc ({@link linkedDocId}) or the URL ({@link externalLink}).
+     */
+    accessor externalLink: string | undefined;
+    accessor linkedDocId: string | undefined;
     accessor lockedBySelf: boolean | undefined;
     accessor opacity: number;
     accessor responseExtension: [number, number];

package/dist/_pkgs/std/gfx/model/surface/element-model.js

@@ -55,6 +55,12 @@ let GfxPrimitiveElementModel = (() => {
     let _index_decorators;
     let _index_initializers = [];
     let _index_extraInitializers = [];
+    let _externalLink_decorators;
+    let _externalLink_initializers = [];
+    let _externalLink_extraInitializers = [];
+    let _linkedDocId_decorators;
+    let _linkedDocId_initializers = [];
+    let _linkedDocId_extraInitializers = [];
     let _lockedBySelf_decorators;
     let _lockedBySelf_initializers = [];
     let _lockedBySelf_extraInitializers = [];
@@ -76,6 +82,8 @@ let GfxPrimitiveElementModel = (() => {
                 }), local()];
             _hidden_decorators = [field(false)];
             _index_decorators = [field()];
+            _externalLink_decorators = [field()];
+            _linkedDocId_decorators = [field()];
             _lockedBySelf_decorators = [field()];
             _opacity_decorators = [local()];
             _responseExtension_decorators = [local()];
@@ -84,6 +92,8 @@ let GfxPrimitiveElementModel = (() => {
             __esDecorate(this, null, _externalXYWH_decorators, { kind: "accessor", name: "externalXYWH", static: false, private: false, access: { has: obj => "externalXYWH" in obj, get: obj => obj.externalXYWH, set: (obj, value) => { obj.externalXYWH = value; } }, metadata: _metadata }, _externalXYWH_initializers, _externalXYWH_extraInitializers);
             __esDecorate(this, null, _hidden_decorators, { kind: "accessor", name: "hidden", static: false, private: false, access: { has: obj => "hidden" in obj, get: obj => obj.hidden, set: (obj, value) => { obj.hidden = value; } }, metadata: _metadata }, _hidden_initializers, _hidden_extraInitializers);
             __esDecorate(this, null, _index_decorators, { kind: "accessor", name: "index", static: false, private: false, access: { has: obj => "index" in obj, get: obj => obj.index, set: (obj, value) => { obj.index = value; } }, metadata: _metadata }, _index_initializers, _index_extraInitializers);
+            __esDecorate(this, null, _externalLink_decorators, { kind: "accessor", name: "externalLink", static: false, private: false, access: { has: obj => "externalLink" in obj, get: obj => obj.externalLink, set: (obj, value) => { obj.externalLink = value; } }, metadata: _metadata }, _externalLink_initializers, _externalLink_extraInitializers);
+            __esDecorate(this, null, _linkedDocId_decorators, { kind: "accessor", name: "linkedDocId", static: false, private: false, access: { has: obj => "linkedDocId" in obj, get: obj => obj.linkedDocId, set: (obj, value) => { obj.linkedDocId = value; } }, metadata: _metadata }, _linkedDocId_initializers, _linkedDocId_extraInitializers);
             __esDecorate(this, null, _lockedBySelf_decorators, { kind: "accessor", name: "lockedBySelf", static: false, private: false, access: { has: obj => "lockedBySelf" in obj, get: obj => obj.lockedBySelf, set: (obj, value) => { obj.lockedBySelf = value; } }, metadata: _metadata }, _lockedBySelf_initializers, _lockedBySelf_extraInitializers);
             __esDecorate(this, null, _opacity_decorators, { kind: "accessor", name: "opacity", static: false, private: false, access: { has: obj => "opacity" in obj, get: obj => obj.opacity, set: (obj, value) => { obj.opacity = value; } }, metadata: _metadata }, _opacity_initializers, _opacity_extraInitializers);
             __esDecorate(this, null, _responseExtension_decorators, { kind: "accessor", name: "responseExtension", static: false, private: false, access: { has: obj => "responseExtension" in obj, get: obj => obj.responseExtension, set: (obj, value) => { obj.responseExtension = value; } }, metadata: _metadata }, _responseExtension_initializers, _responseExtension_extraInitializers);
@@ -162,7 +172,9 @@ let GfxPrimitiveElementModel = (() => {
             this.#externalXYWH_accessor_storage = (__runInitializers(this, _display_extraInitializers), __runInitializers(this, _externalXYWH_initializers, undefined));
             this.#hidden_accessor_storage = (__runInitializers(this, _externalXYWH_extraInitializers), __runInitializers(this, _hidden_initializers, false));
             this.#index_accessor_storage = (__runInitializers(this, _hidden_extraInitializers), __runInitializers(this, _index_initializers, void 0));
-            this.#lockedBySelf_accessor_storage = (__runInitializers(this, _index_extraInitializers), __runInitializers(this, _lockedBySelf_initializers, false));
+            this.#externalLink_accessor_storage = (__runInitializers(this, _index_extraInitializers), __runInitializers(this, _externalLink_initializers, undefined));
+            this.#linkedDocId_accessor_storage = (__runInitializers(this, _externalLink_extraInitializers), __runInitializers(this, _linkedDocId_initializers, undefined));
+            this.#lockedBySelf_accessor_storage = (__runInitializers(this, _linkedDocId_extraInitializers), __runInitializers(this, _lockedBySelf_initializers, false));
             this.#opacity_accessor_storage = (__runInitializers(this, _lockedBySelf_extraInitializers), __runInitializers(this, _opacity_initializers, 1));
             this.#responseExtension_accessor_storage = (__runInitializers(this, _opacity_extraInitializers), __runInitializers(this, _responseExtension_initializers, [0, 0]));
             this.#seed_accessor_storage = (__runInitializers(this, _responseExtension_extraInitializers), __runInitializers(this, _seed_initializers, void 0));
@@ -294,6 +306,17 @@ let GfxPrimitiveElementModel = (() => {
         #index_accessor_storage;
         get index() { return this.#index_accessor_storage; }
         set index(value) { this.#index_accessor_storage = value; }
+        #externalLink_accessor_storage;
+        /**
+         * Minimal link target attached to the element. At most one is set.
+         * Opaque to the framework; an affine widget shows a hover arrow that
+         * opens the doc ({@link linkedDocId}) or the URL ({@link externalLink}).
+         */
+        get externalLink() { return this.#externalLink_accessor_storage; }
+        set externalLink(value) { this.#externalLink_accessor_storage = value; }
+        #linkedDocId_accessor_storage;
+        get linkedDocId() { return this.#linkedDocId_accessor_storage; }
+        set linkedDocId(value) { this.#linkedDocId_accessor_storage = value; }
         #lockedBySelf_accessor_storage;
         get lockedBySelf() { return this.#lockedBySelf_accessor_storage; }
         set lockedBySelf(value) { this.#lockedBySelf_accessor_storage = value; }

package/dist/_pkgs/std/inline/components/v-element.js

@@ -90,9 +90,12 @@ let VElement = (() => {
         }
         async getUpdateComplete() {
             const result = await super.getUpdateComplete();
+            // The inner span (and its child) may not be in the DOM yet when this is
+            // awaited mid mount/unmount — guard instead of throwing on `null`.
             const span = this.querySelector('[data-v-element="true"]');
-            const el = span.firstElementChild;
-            await el.updateComplete;
+            const el = span?.firstElementChild;
+            if (el)
+                await el.updateComplete;
             const vTexts = Array.from(this.querySelectorAll('v-text'));
             await Promise.all(vTexts.map(vText => vText.updateComplete));
             return result;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-core",
   "description": "Labre editor — the full BlockSuite-derived editor as one package.",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",