Link Search Menu Expand Document

Render occlusions

Table of contents

  1. Render occlusions

Render occlusions

Occlusions can be defined by using the position of the origin (top left), and the width and height of the rectangle.

/** Make occlusions */
filterManager.install(
  closet.browser.recipes.occlusionEditor(),
  closet.browser.recipes.rect.show({ tagname: 'rect' }),
  closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
  closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
<img src="/assets/images/cranial-bones.png" />
<!-- [[recth1::326,78,587,144]]
[[recth2::117,283,574,274]]
[[recth3::78,666,500,265]]
[[recth4::1656,48,617,165]]
[[recth5::1973,391,495,252]]
[[recth6::1952,1179,509,283]] -->

Similar to clozes, there are three subtypes of occlusions:

  • showing occlusions
  • hiding occlusions
  • revealing occlusions
/** Make occlusions */
filterManager.install(
  closet.browser.recipes.occlusionEditor(),
  closet.browser.recipes.rect.show({ tagname: 'rect' }),
  closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
  closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
<img src="/assets/images/cell.png" />
<!-- [[rect1::182,60,157,46]]
[[rect1::190,114,141,54]]
[[rect2::87,190,258,60]]
[[rectr2::52,271,315,41]]
[[recth2::448,114,195,41]]
[[rect3::633,30,187,41]]
[[rectr3::866,11,176,54]]
[[recth3::1233,95,323,54]] -->

To be more exact, occlusions also react to the flashcard interface. This means, they can be used with the flashcard specific commands.

/** Make occlusions */
filterManager.install(
  closet.browser.recipes.occlusionEditor(),
  closet.browser.recipes.rect.show({ tagname: 'rect' }),
  closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
  closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)

/** Flashcard features */
filterManager.install(
  closet.recipes.activate({ tagname: 'on', storeId: 'flashcardActive' }),
  closet.recipes.deactivate({ tagname: 'off', storeId: 'flashcardActive' }),

  closet.wrappers.product(closet.recipes.setNumber, closet.recipes.setNumber)({
    tagname: 'around',
    optionsFirst: { storeId: 'flashcardActiveTop' },
    optionsSecond: { storeId: 'flashcardActiveBottom' },
  }),

  closet.recipes.setNumber({ tagname: 'up', storeId: 'flashcardActiveTop' }),
  closet.recipes.setNumber({ tagname: 'down', storeId: 'flashcardActiveBottom' }),

  closet.recipes.activate({ tagname: 'show', storeId: 'flashcardShow' }),
  closet.recipes.activate({ tagname: 'hide', storeId: 'flashcardHide' }),

  closet.recipes.setNumber({ tagname: 'top', storeId: 'flashcardShowTop' }),
  closet.recipes.setNumber({ tagname: 'bottom', storeId: 'flashcardShowBottom' }),

  closet.wrappers.product(closet.recipes.setNumber, closet.recipes.setNumber)({
    tagname: 'ctxt',
    optionsFirst: { storeId: 'flashcardShowTop' },
    optionsSecond: { storeId: 'flashcardShowBottom' },
  }),
)
<img src="/assets/images/wikipedia.png" />
<!-- [[on::recth1]] [[ctxt::recth*=1]]
[[recth1::582,303,703,114]]
[[recth2::189,817,510,214]]
[[recth3::1056,828,503,200]]
[[recth4::114,1367,321,268]]
[[recth5::746,1352,332,282]]
[[recth6::1488,1335,328,310]] -->