和风

家族的共享接口部分，作为它们自己的版本化包：每个子路径一个部分，所以一个页面只加载它使用的部分。没有运行时依赖，MIT。 第一部分是 视图控件 用于任何3D或可缩放视图。它们从不绘制场景：它们告诉你的页面读者选择了什么，而你的画布，WebGL， SVG或CSS 3D应用它。

演示 · 标签，英文和中文 · 更新日志

npm install @johnmorrisdotca/kazoku-ui

部分（每个部分都有自己的子路径；后面的部分：图片贴图选择器，带有明暗的主题色板，英文和中文开关，帮助，GitHub和npm药丸，保存SVG和PNG，家庭背景）：

视图控件

• 角度和倾斜滑块，自动旋转与播放和暂停，前面。
• 缩小，2倍，放大和适合。缩放是关于指针（Ctrl或Command与滚轮，或触控板的捏）。
• 四个箭头平移键（放大后显示）和移动或转向选项用于拖动。
• 触摸：一根手指旋转1x，放大时移动视图；两根手指捏。
• 键在视图上：箭头转动和倾斜， + 和 - 变焦, 0 或者Home is Front and Fit。
• 选项保存在地址中，其中的键可以重命名。
• 英文和日文标签；光明与黑暗；48像素触摸目标；手机上的小型酒吧；对于喜欢减少运动的读者来说，没有自动旋转。
• 控件永远不会停止或重置回合。 缩放，倾斜，平移，移动或转向选择，Fit和Front都会使自动旋转运行（Front只将角度设置为0，并且从那里开始旋转）。在角度滑块上的手，或者通过拖动来转动视图，在视图向下时保持转弯不动，并且从手离开的位置继续转弯。只有自动旋转按钮暂停它。

在纯HTML中

<div id="scene" tabindex="0" style="height: 320px">...your scene...</div>
<kazoku-view-controls for="scene" address></kazoku-view-controls>

<script type="module">
  import "@johnmorrisdotca/kazoku-ui/view-controls/define";

  const scene = document.getElementById("scene");
  document.querySelector("kazoku-view-controls").addEventListener("kazoku-viewchange", (event) => {
    const { yaw, tilt, zoom, panX, panY } = event.detail;
    scene.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom}) rotateX(${tilt}deg) rotateY(${yaw}deg)`;
  });
</script>

将元素放在视图上或它的右边，这样它就和视图一起出现在屏幕上。 for 命名手绑定到的元素（指针、缩放、转轮和键）；给它一个机会 tabindex 如果你想把键放在上面，根据视图来调整大小，因为平移是在房间里缩放的。与 overlay 该工具条位于其父工具条的底部。

在框架中

该元素是普通的DOM，因此任何框架都将其与一个ref和一个侦听器一起使用。反应:

import "@johnmorrisdotca/kazoku-ui/view-controls/define";
import { useEffect, useRef } from "react";

export function Viewer({ draw }) {
  const view = useRef(null);
  const controls = useRef(null);
  useEffect(() => {
    const bar = controls.current;
    bar.view = view.current;
    const on = (event) => draw(event.detail);
    bar.addEventListener("kazoku-viewchange", on);
    return () => bar.removeEventListener("kazoku-viewchange", on);
  }, [draw]);
  return (
    <>
      <div ref={view} tabIndex={0} style={{ height: 320 }} />
      <kazoku-view-controls ref={controls} lang="en" />
    </>
  );
}

没有元素

createViewController 是相同的手和状态，没有自己的标记，对于绘制自己按钮的页面。它只在 bind.

import { createViewController } from "@johnmorrisdotca/kazoku-ui/view-controls";

const view = createViewController({
  speed: 30, // degrees a second for Auto-turn
  onChange(state, { final, reason }) {
    draw(state); // { yaw, tilt, zoom, panX, panY, turning, drag }
  },
});
const unbind = view.bind(document.getElementById("scene")); // pointer, pinch, wheel, keys
myPlayButton.onclick = () => view.toggle();
myZoomIn.onclick = () => view.zoomBy(1.4);

选项的 createViewController 匹配: zoom （"fit" 或者一个数字)， fitScale， ignore． 控制器也有 ignore (的), fitScale， startZoom ( zoom 视图在)和处打开 setFitScale(n)， setStartZoom(zoom)； DEFAULT_IGNORE 是默认的选择器。

视图中的按钮和链接

手抓住指针上的 for 元素，因此按下放置在其中的按钮或链接将被视为拖动，而其点击将丢失。按下任何符合的 ignore （没有捕获，没有拖动，没有双击），然后点击就完成了。给其他孩子做标记 data-kazoku-ignore． 从视图的空部分拖动使其像以前一样转动。

ignore 也可以通过阴影DOM看到：它会测试事件路径上的每个元素，从最里面的那个元素一直到视图，所以即使事件的目标是组件，web组件打开的阴影根中的按钮（比如卡片自己的Animate按钮）也不会受到影响。封闭的影子根将其内部隐藏在页面中，因此只有组件本身可以匹配：将主机标记为 data-kazoku-ignore，或将其标记名添加到 ignore.

以现场的自然大小开场

缩放1表示适合，无论页面大小如何。一页在 fitScale （例如，当它适合视图时，它的自然大小为0.4），并希望以自然大小集打开 zoom="1" 并告诉控制者刻度：

const controls = document.querySelector("kazoku-view-controls");
controls.setAttribute("zoom", "1"); // natural size
controls.setFitScale(measure()); // the scale the scene is drawn at when it fits, for example 0.4
// the event's zoom is now 2.5; draw at event.detail.zoom * controls.fitScale

setFitScale 将视图移动到新比例的开始缩放，除非阅读器已经缩放。Fit和Fit键仍然是缩放1，当地址是打开的时候，它会留下一个缩放。 zoom="fit"，或者没有 zoom，与以前没有任何改变。

事件API

kazoku-viewchange 在元素上分配（它冒泡并穿过阴影根）。 event.detail的第一个参数 onChange是:

一个 init 事件在元素连接后立即发送一次，并使用起始视图（来自属性和地址）。 element.state 是任何时候的当前视图。

属性

方法: play()， pause()， front()， fit()， set({ yaw, tilt, zoom, panX, panY, drag })， setFitScale(n), controller ( createViewController 对象)。 element.words = { front: "Home" } 替换标签。 颜色是自定义属性： --kazoku-ink， --kazoku-surface， --kazoku-line， --kazoku-accent;这些部分是 bar， field， slider 和 button.

的地址

只保留读者选择的内容：角度、倾斜、缩放和拖动选项。平移是以一个屏幕的像素为单位的，转动是瞬间的，所以两者都不是；当视图自己转动时，角度被忽略了。在其开始处的值(Fit或 zoom 页面在)打开时留下地址，其他参数保留。该地址每秒最多写入4次（Safari会在30秒内停止更改地址超过100次的页面）。不含元素的： parseAddress(search, keys?) 和 formatAddress(search, choices, keys?, leaveYaw?, startZoom?).

为什么标签只有在空闲时才被定义

customElements.define 当取一个名称时抛出，并且页面可以毫无错误地满足这个要求：该包的两个副本（每个包一个应用程序和一个小部件，或两个版本），脚本加载两次，或者注册了标记以提供自己的元素的页面。throw会停止导入模块和与之相关的页面脚本。所以 define 调用 customElements.get 第一种定义获胜； defineViewControls(registry?) 返回它是否定义了标记。

大小

压缩，未捆绑：元素及其定义约5.0 KB，控制器约3.9 KB，数学约1.4 KB，地址约1.2 KB，标签约0.7 KB，样式约1.6 KB (pnpm test:package 打印)。没有从网络中加载任何内容。

检查

pnpm check （lint，类型，数学的29个单元测试，地址，控制器和包，构建和打包包），以及 pnpm test:demo （chrome和WebKit在手机和桌面的宽度上的演示：第一个屏幕上的控件，自动旋转时的切换使角度前进，视图内的按钮或链接在拖动旋转时仍然点击，打开缩放和适合比例，缩放指针，缩放时的平移，触摸，地址，标签，减少运动）。

没有

还没有发布到npm。日语标签还没有被母语人士读过。演示的场景是一个CSS 3D卡；这个包对什么画没有意见。

执照:麻省理工学院。此包中没有品牌、联赛或赞助商的标志。