内容选中高亮

在上一章节中我们忽略了 highlight.js 内的代码，但我们知道其作用为对选中的内容（点除外）进行选中高亮操作，这一章节中我们将详细探讨内容选中高亮问题。

实现内容选中高亮大致分为如下步骤：

完成初始化F-BIM
设置 F-BIM 默认选中高亮颜色
获取选中的内容
调用 selection_manager 的 highlight 方法
调用 selection_manager 的 commit 方法提交更改
设置 scene_context 的 changed 属性为 true，应用更改

注意

虽然选中高亮能改变内容的颜色，但请不要使用此方式来更改内容的颜色，后续章节中将介绍专门的内容颜色修改方式，选中高亮本意在于维护内容的选中状态而非改变颜色。

告知

为避免初始化 F-BIM 逻辑占用太多代码行数， Scene 初始化已移至 scene.js 完成，其导出的 scene 已完成初始化。

构件选中高亮

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

几何体选中高亮

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

面选中高亮

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

总结

从上面的示例不难看出，上述示例中只有内容选中模式这一处不同（及 select 事件回调的入参不同），但我们只需要将select 事件回调返回的选中结果（ event.detail ，包含选中类型和选中的内容）直接传递给 selection_manager 的 highlight 方法即可，不用做特殊区分。

取消单个内容选中高亮

细心的你一定发现了，重复选中内容（重复调用 highlight 函数）时，内容会在高亮与取消高亮直接来回切换，显而易见，如果想取消选中内容的高亮只需要再次调用 highlight 函数即可。

获取选中高亮的内容

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

全部高亮、取消所有高亮

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

内容选中高亮 ​

构件选中高亮 ​

几何体选中高亮 ​

面选中高亮 ​

取消单个内容选中高亮 ​

获取选中高亮的内容 ​

全部高亮、取消所有高亮 ​

内容选中高亮

构件选中高亮

几何体选中高亮

面选中高亮

取消单个内容选中高亮

获取选中高亮的内容

全部高亮、取消所有高亮