tldraw
Version:
A tiny little drawing editor.
213 lines (212 loc) • 9.07 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var BookmarkShapeUtil_exports = {};
__export(BookmarkShapeUtil_exports, {
BookmarkIndicatorComponent: () => BookmarkIndicatorComponent,
BookmarkShapeComponent: () => BookmarkShapeComponent,
BookmarkShapeUtil: () => BookmarkShapeUtil
});
module.exports = __toCommonJS(BookmarkShapeUtil_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_classnames = __toESM(require("classnames"), 1);
var import_react = require("react");
var import_text = require("../../utils/text/text");
var import_HyperlinkButton = require("../shared/HyperlinkButton");
var import_icons_editor = require("../shared/icons-editor");
var import_rotated_box_shadow = require("../shared/rotated-box-shadow");
var import_bookmarks = require("./bookmarks");
class BookmarkShapeUtil extends import_editor.BaseBoxShapeUtil {
static type = "bookmark";
static props = import_editor.bookmarkShapeProps;
static migrations = import_editor.bookmarkShapeMigrations;
canResize() {
return false;
}
hideSelectionBoundsFg() {
return true;
}
getText(shape) {
return shape.props.url;
}
getAriaDescriptor(shape) {
const asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null;
if (!asset?.props.title) return void 0;
return (0, import_text.convertCommonTitleHTMLEntities)(asset.props.title) + (asset.props.description ? ", " + asset.props.description : "");
}
getDefaultProps() {
return {
url: "",
w: import_bookmarks.BOOKMARK_WIDTH,
h: import_bookmarks.BOOKMARK_HEIGHT,
assetId: null
};
}
component(shape) {
const { assetId, url, h } = shape.props;
const rotation = this.editor.getShapePageTransform(shape).rotation();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BookmarkShapeComponent, { assetId, url, h, rotation });
}
indicator(shape) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BookmarkIndicatorComponent, { w: shape.props.w, h: shape.props.h });
}
useLegacyIndicator() {
return false;
}
getIndicatorPath(shape) {
const path = new Path2D();
path.roundRect(0, 0, shape.props.w, shape.props.h, 6);
return path;
}
onBeforeCreate(next) {
return (0, import_bookmarks.setBookmarkHeight)(this.editor, next);
}
onBeforeUpdate(prev, shape) {
if (prev.props.url !== shape.props.url) {
if (!import_editor.T.linkUrl.isValid(shape.props.url)) {
return { ...shape, props: { ...shape.props, url: prev.props.url } };
} else {
(0, import_bookmarks.updateBookmarkAssetOnUrlChange)(this.editor, shape);
}
}
if (prev.props.assetId !== shape.props.assetId) {
return (0, import_bookmarks.setBookmarkHeight)(this.editor, shape);
}
return void 0;
}
getInterpolatedProps(startShape, endShape, t) {
return {
...t > 0.5 ? endShape.props : startShape.props,
w: (0, import_editor.lerp)(startShape.props.w, endShape.props.w, t),
h: (0, import_editor.lerp)(startShape.props.h, endShape.props.h, t)
};
}
}
function BookmarkIndicatorComponent({ w, h }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: (0, import_editor.toDomPrecision)(w), height: (0, import_editor.toDomPrecision)(h), rx: "6", ry: "6" });
}
function BookmarkShapeComponent({
assetId,
rotation,
url,
h,
showImageContainer = true
}) {
const editor = (0, import_editor.useEditor)();
const asset = assetId ? editor.getAsset(assetId) : null;
const isSafariExport = !!(0, import_editor.useSvgExportContext)() && import_editor.tlenv.isSafari;
const address = (0, import_bookmarks.getHumanReadableAddress)(url);
const [isFaviconValid, setIsFaviconValid] = (0, import_react.useState)(true);
const onFaviconError = () => setIsFaviconValid(false);
const markAsHandledOnShiftKey = (0, import_react.useCallback)(
(e) => {
if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e);
},
[editor]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.HTMLContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: (0, import_classnames.default)(
"tl-bookmark__container",
isSafariExport && "tl-bookmark__container--safariExport"
),
style: {
boxShadow: isSafariExport ? void 0 : (0, import_rotated_box_shadow.getRotatedBoxShadow)(rotation),
maxHeight: h
},
children: [
showImageContainer && (!asset || asset.props.image) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tl-bookmark__image_container", children: [
asset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"img",
{
className: "tl-bookmark__image",
draggable: false,
referrerPolicy: "strict-origin-when-cross-origin",
src: asset?.props.image,
alt: asset?.props.title || ""
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-bookmark__placeholder" }),
asset?.props.image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HyperlinkButton.HyperlinkButton, { url })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tl-bookmark__copy_container", children: [
asset?.props.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"a",
{
className: "tl-bookmark__link",
href: url || "",
target: "_blank",
rel: "noopener noreferrer",
draggable: false,
onPointerDown: markAsHandledOnShiftKey,
onPointerUp: markAsHandledOnShiftKey,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "tl-bookmark__heading", children: (0, import_text.convertCommonTitleHTMLEntities)(asset.props.title) })
}
) : null,
asset?.props.description && asset?.props.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "tl-bookmark__description", children: asset.props.description }) : null,
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"a",
{
className: "tl-bookmark__link",
href: url || "",
target: "_blank",
rel: "noopener noreferrer",
draggable: false,
onPointerDown: markAsHandledOnShiftKey,
onPointerUp: markAsHandledOnShiftKey,
children: [
isFaviconValid && asset?.props.favicon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"img",
{
className: "tl-bookmark__favicon",
src: asset?.props.favicon,
referrerPolicy: "strict-origin-when-cross-origin",
onError: onFaviconError,
alt: `favicon of ${address}`
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: "tl-hyperlink__icon",
style: {
mask: `url("${import_icons_editor.LINK_ICON}") center 100% / 100% no-repeat`,
WebkitMask: `url("${import_icons_editor.LINK_ICON}") center 100% / 100% no-repeat`
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: address })
]
}
)
] })
]
}
) });
}
//# sourceMappingURL=BookmarkShapeUtil.js.map